<template>
    <div class="week-plan">
      
     
      <div v-if="step ==1">
        <el-form ref="form" :model="form" label-width="100px" :inline="true">
          <el-form-item label="设定年度">
            <el-select v-model="form.years" placeholder="请选择设定年度">
              <el-option
                v-for="item in form.yearsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="阶段目标选择">
            <el-select v-model="form.stageValue" placeholder="请选择阶段目标">
              <el-option
                v-for="item in form.stageOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="周期选择">
            <el-select v-model="form.weeks" placeholder="请选择周期选择">
              <el-option
                v-for="item in form.weeksOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="周类型选择">
            <el-select v-model="form.weeksType" placeholder="请选择周期类型">
              <el-option
                v-for="item in form.weeksTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="训练地点选择">
            <el-select v-model="form.address" placeholder="请选择周期类型">
              <el-option
                v-for="item in form.addressOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择本周领队">
            <el-select v-model="form.team" placeholder="请选择周期类型">
              <el-option
                v-for="item in form.teamOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="本周主教练">
          <el-select v-model="form.coach" placeholder="请选择本周主教练">
              <el-option
                v-for="item in form.coachOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="本周专项教练">
          <el-select v-model="form.special" placeholder="请选择本周专项教练">
              <el-option
                v-for="item in form.specialOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="本周体能教练">
          <el-select v-model="form.physical" placeholder="请选择本周体能教练">
              <el-option
                v-for="item in form.physicalOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="本周队医">
          <el-select v-model="form.teamDoc" placeholder="请选择本周队医">
              <el-option
                v-for="item in form.teamDocOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="week-target-title" label="本周目标填写">
            <el-input :rows="8" type="textarea" v-model="form.target"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="step == 2">
        <div class="final-step-title">
          当前处于
          <span>
            {{form.stageValue}}
            2月1~8号
          </span>
          <span>
            {{form.weeks}}
          </span>
          <span>
            {{form.weeksType}}
          </span>
        </div>
        <div class="two-form-box">
          <el-form ref="secondForm" :inline="true" :model="secondForm" label-width="100px">
            <el-form-item>
              <el-select v-model="secondForm.value" placeholder="请选择设定年度">
                <el-option
                  v-for="item in secondForm.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择日期">
              <el-select v-model="secondForm.date" placeholder="请选择日期">
                <el-option
                  v-for="item in secondForm.dateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form>
            <el-form-item>
              <el-button type='primary' @click="handerCreateWeek">周计划创建</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="train-title">
          <span>时间段</span>
          <span>上午</span>
          <span>08:30~11:30</span>
        </div>
        <div class="train-table-box">
          <el-table
            :data="trainTableData"
            border
            style="width: 100%">
            <el-table-column prop="subject" label="训练科目"></el-table-column>
            <el-table-column prop="type" label="二级科目"></el-table-column>
            <el-table-column prop="time" label="时长(分钟)"></el-table-column>
          </el-table>
        </div>
        <div class="train-title">
          <span>时间段</span>
          <span>上午</span>
          <span>08:30~11:30</span>
        </div>
        <div class="train-table-box">
          <el-table
            :data="trainTableData2"
            border
            style="width: 100%">
            <el-table-column prop="subject" label="训练科目"></el-table-column>
            <el-table-column prop="type" label="二级科目"></el-table-column>
            <el-table-column prop="time" label="时长(分钟)"></el-table-column>
          </el-table>
        </div>
        <div class="plan-button">
          <el-button type="primary">制定计划</el-button>
        </div>
        <div class="train-table-box">
          <el-table
            :data="planTableData"
            border
            style="width: 100%">
            <el-table-column prop="subject" label="训练科目"></el-table-column>
            <el-table-column prop="type" label="公里数"></el-table-column>
            <el-table-column prop="time" label="时长"></el-table-column>
            <el-table-column prop="time" label="理想心率"></el-table-column>
            <el-table-column prop="time" label="理想浆频"></el-table-column>
            <el-table-column prop="time" label="理想乳酸"></el-table-column>
            <el-table-column prop="time" label="组数"></el-table-column>
            <el-table-column prop="time" label="间歇时间"></el-table-column>
            <el-table-column prop="time" label="二级科目"></el-table-column>
          </el-table>
        </div>
      </div>
      <div v-if="step == 3">
        <div class="final-step-title">
          本节课次强度设定
        </div>
        <div class="strength-box">
          <div class="strength-title">水上专项训练</div>
          <el-input v-model="waterStart" placeholder="请输入内容"></el-input>
          <span class="strength-to">至</span>
          <el-input v-model="waterEnd" placeholder="请输入内容"></el-input>
        </div>

      </div>
      <div class="check-radio">
        <el-radio v-model="radio" label="1">查看当日训练数据</el-radio>
      </div>
      <div class="step-box">
        <el-button type="primary" v-if="step != 1"  @click="handerBackBtn" >上一步</el-button>
        <el-button type="primary" v-if="step !=3" @click="handerNextBtn">下一步</el-button>
        <el-button type="primary" v-if="step ==3">确定</el-button>
      </div>
      
      <el-dialog
        title="周计划创建"
        :visible.sync="weekDialogVisible"
        width="1150px">
        <div class="create-header">
          <el-form ref="creatWeekForm" label-position="left" :inline="true" :model="creatWeekForm" label-width="120px">
            <el-form-item label="选择日期" prop="date">
              <el-select v-model="creatWeekForm.date" placeholder="请选择日期">
                <el-option
                  v-for="item in creatWeekForm.dateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form :model="createMainForm"  label-position="left" ref="createMainForm" :inline="true" label-width="120px">
           <div class="create-main-box">
              <div class="title">早晨</div>
              <div class="create-plan-main">
                <el-form-item label="时间设定" prop="beforeMornTimer">
                  <el-time-picker
                    is-range
                    v-model="createMainForm.beforeMornTimer"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围">
                </el-time-picker>
                </el-form-item>
                <div v-for="(item,index) in createMainForm.beforeMornTrainArr" :key="index">
                  <el-form-item label="一级科目">
                    <el-input v-model="item.firstSub" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="二级科目">
                    <el-input v-model="item.secondsSub" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="课时数(分钟)">
                    <el-input v-model="item.courseNumber" placeholder="请输入内容"></el-input>
                  </el-form-item>
                   <span v-if="index == 0" @click="handerAdd('beforeMorn')" class="el-icon-circle-plus-outline main-icon"></span>
                  <span v-if="index != 0" @click="handerDelete('beforeMorn', index)" class="el-icon-remove-outline main-icon"></span>                 
                </div>
              </div>
            </div>

            <div class="create-main-box">
                <div class="title">上午</div>
                <div class="create-plan-main">
                  <el-form-item label="时间设定">
                    <el-time-picker
                      is-range
                      v-model="createMainForm.morningTimer"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      placeholder="选择时间范围">
                  </el-time-picker>
                  </el-form-item>
                  <div v-for="(item,index) in createMainForm.morningTrainArr" :key="index">
                    <el-form-item label="一级科目">
                      <el-input v-model="item.firstSub" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="二级科目">
                      <el-input v-model="item.secondsSub" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="课时数(分钟)">
                      <el-input v-model="item.courseNumber" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <span v-if="index == 0" @click="handerAdd('morning')" class="el-icon-circle-plus-outline main-icon"></span>
                    <span v-if="index != 0" @click="handerDelete('morning', index)" class="el-icon-remove-outline main-icon"></span>
                    <el-form-item label="公里数(公里)">
                      <el-input v-model="item.kil" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="浆频(SR)">
                      <el-input v-model="item.oareRate" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="心率(HR)">
                      <el-input v-model="item.heartRate" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="组数(组)">
                      <el-input v-model="item.group" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="间歇时间(分钟)">
                      <el-input v-model="item.timeOut" placeholder="请输入内容"></el-input>
                    </el-form-item>
                  </div>
                </div>
            </div>
            <div class="create-main-box">
                <div class="title">下午</div>
                <div class="create-plan-main">
                  <el-form-item label="时间设定">
                    <el-time-picker
                      is-range
                      v-model="createMainForm.afternoonTimer"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      placeholder="选择时间范围">
                  </el-time-picker>
                  </el-form-item>
                  <div v-for="(item,index) in createMainForm.afternoonTrainArr" :key="index">
                    <el-form-item label="一级科目">
                      <el-input v-model="item.firstSub" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="二级科目">
                      <el-input v-model="item.secondsSub" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="课时数(分钟)">
                      <el-input v-model="item.courseNumber" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <span v-if="index == 0" @click="handerAdd('afternoon')" class="el-icon-circle-plus-outline main-icon"></span>
                    <span v-if="index != 0" @click="handerDelete('afternoon', index)" class="el-icon-remove-outline main-icon"></span>
                    <el-form-item label="公里数(公里)">
                      <el-input v-model="item.kil" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="浆频(SR)">
                      <el-input v-model="item.oareRate" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="心率(HR)">
                      <el-input v-model="item.heartRate" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="组数(组)">
                      <el-input v-model="item.group" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="间歇时间(分钟)">
                      <el-input v-model="item.timeOut" placeholder="请输入内容"></el-input>
                    </el-form-item>
                  </div>
                </div>
            </div>
            <div class="create-main-box">
              <div class="title">晚上</div>
              <div class="create-plan-main">
                <el-form-item label="时间设定">
                  <el-time-picker
                    is-range
                    v-model="createMainForm.nightTimer"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围">
                </el-time-picker>
                </el-form-item>
                <div v-for="(item,index) in createMainForm.nightTrainArr" :key="index">
                  <el-form-item label="一级科目">
                    <el-input v-model="item.firstSub" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="二级科目">
                    <el-input v-model="item.secondsSub" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="课时数(分钟)">
                    <el-input v-model="item.courseNumber" placeholder="请输入内容"></el-input>
                  </el-form-item>
                   <span v-if="index == 0" @click="handerAdd('night')" class="el-icon-circle-plus-outline main-icon"></span>
                  <span v-if="index != 0" @click="handerDelete('night', index)" class="el-icon-remove-outline main-icon"></span>
                
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>
<script>
  export default {
    name: 'WeekPlan',
    components: { },
    data() {
      return {
        radio: '1',
        waterStart: '', // 水上专项训练开始
        waterEnd: '',  // 水上专项训练结束
        step: 1, // 第几步，默认第一步
        trainTableData: [],
        trainTableData2: [],
        planTableData: [], // 制定计划按钮下的表格
        weekDialogVisible: false, // 创建周计划的弹框的 显示隐藏
        creatWeekForm: { 
          date: '1', // 选择日期绑定的值
          dateOptions: [{ // 日期的选择下拉框的值
            label: '周一',
            value: '1'
          }, {
            label: '周二',
            value: '2'
          }, {
            label: '周三',
            value: '3'
          }, {
            label: '周四',
            value: '4'
          }, {
            label: '周五',
            value: '5'
          }, {
            label: '周六',
            value: '6'
          }, {
            label: '周日',
            value: '7'
          }]
        },
        createMainForm: {  // 创建周计划弹框的 form
          beforeMornTimer: '', // 早晨
          beforeMornTrainArr: [{
            firstSub: '1', // 一级科目
            secondsSub: '2', // 二级科目
            courseNumber: '3', // 课时数
          }],
          morningTimer: '', // 上午
          morningTrainArr: [{
            firstSub: '13', // 一级科目
            secondsSub: '2', // 二级科目
            courseNumber: '3', // 课时数
            kil: '', // 公里数
            oareRate: '', // 浆频
            heartRate: '', // 心率
            group: '', // 组数
            timeOut: '', // 每组间歇时间
          }],
          afternoonTimer: '',
          afternoonTrainArr: [{
            firstSub: '13', // 一级科目
            secondsSub: '2', // 二级科目
            courseNumber: '3', // 课时数
            kil: '', // 公里数
            oareRate: '', // 浆频
            heartRate: '', // 心率
            group: '', // 组数
            timeOut: '', // 每组间歇时间
          }],
          nightTimer: '',
          nightTrainArr: [{
            firstSub: '12', // 一级科目
            secondsSub: '2', // 二级科目
            courseNumber: '3', // 课时数
          }]
        },
        form: {
          years: '1', // 设定年度
          yearsOptions: [{  // 设定年度下拉框的内容
            label: '2015',
            value: '1'
          },],
          stageValue: '1', // 阶段目标
          stageOptions: [{  // 阶段目标下拉框的内容
            label: '一般准备期',
            value: '1'
          }, {
            label: '过渡期',
            value: '2'
          }],
          weeks: '1',  // 周期选择
          weeksOptions: [{  // 周期下拉框的内容
            label: '第1周',
            value: '1'
          }, {
            label: '第2周',
            value: '2'
          }, {
            label: '第3周',
            value: '3'
          }, {
            label: '第4周',
            value: '4'
          }],
          weeksType: '1', // 周期类型
          weeksTypeOptions: [{  // 周期类型下拉框的内容
            label: '基本周',
            value: '1'
          }, {
            label: '积累周',
            value: '2'
          }, {
            label: '大量积累周',
            value: '3'
          },  {
            label: '调整周',
            value: '4'
          },  {
            label: '赛前强化周',
            value: '5'
          },  {
            label: '比赛周',
            value: '6'
          },  {
            label: '恢复周',
            value: '7'
          }],
          address: '1', // 训练地点
          addressOptions: [{  // 训练地点下拉框的内容
            label: '紫蓬山',
            value: '1'
          }, {
            label: '大蜀山',
            value: '2'
          }, {
            label: '野生动物园',
            value: '3'
          }],
          team: '1', // 本周领队
          teamOptions:  [{  // 本周领导下拉框的内容
            label: '代号1',
            value: '1'
          }, {
            label: '代号3',
            value: '2'
          }, {
            label: '代号3',
            value: '3'
          }],
          coach: '1', // 主教练
          coachOptions:  [{  // 主教练下拉框的内容
            label: '代号4',
            value: '1'
          }, {
            label: '代号5',
            value: '2'
          }, {
            label: '代号6',
            value: '3'
          }],
          special: '1', // 专项教练
          specialOptions:  [{  // 专项教练下拉框的内容
            label: '代号0',
            value: '1'
          }, {
            label: '代号011',
            value: '2'
          }, {
            label: '代号012',
            value: '3'
          }],
          physical: '1',  // 体能教练
          physicalOptions:  [{  // 体能教练下拉框的内容
            label: '代号7',
            value: '1'
          }, {
            label: '代号8',
            value: '2'
          }, {
            label: '代号9',
            value: '3'
          }],
          teamDoc: '1',  // 队医
          teamDocOptions:  [{  // 队医下拉框的内容
            label: '代号10',
            value: '1'
          }, {
            label: '代号11',
            value: '2'
          }, {
            label: '代号12',
            value: '3'
          }],
          target: '', // 本周目标
        
        },
        secondForm: {
          value: '1', // 导入绑定的值
          options: [{ // 导入下拉框的值
            label: '导入历史',
            value: '1'
          }, {
            label: '一般准备期',
            value: '2'
          }],
          date: '1', // 选择日期绑定的值
          dateOptions: [{ // 日期的选择下拉框的值
            label: '周一',
            value: '1'
          }, {
            label: '周二',
            value: '2'
          }, {
            label: '周三',
            value: '3'
          }, {
            label: '周四',
            value: '4'
          }, {
            label: '周五',
            value: '5'
          }, {
            label: '周六',
            value: '6'
          }, {
            label: '周日',
            value: '7'
          }]
        }
      }
    },
    methods: {
      handerBackBtn() {
        this.step--;
      },
      // 下一步的 事件
      handerNextBtn() {
        this.step++;
      },
      // 创建周计划弹框中的+  的事件
      handerAdd(value) {
        console.log(value);
        // 早晨
        if (value == 'beforeMorn') {
          this.createMainForm.beforeMornTrainArr.push({
            firstSub: '', 
            secondsSub: '',
            courseNumber: '',
          });
        }
        // 上午的
        if (value == 'morning') {
          this.createMainForm.morningTrainArr.push({
             firstSub: '', 
            secondsSub: '',
            courseNumber: '',
            kil: '',
            oareRate: '',
            heartRate: '',
            group: '',
            timeOut: '',
          })
        }
        // 下午的
        if (value == 'afternoon') {
          this.createMainForm.afternoonTrainArr.push({
            firstSub: '', 
            secondsSub: '',
            courseNumber: '',
            kil: '',
            oareRate: '',
            heartRate: '',
            group: '',
            timeOut: '',
          })
        }
        // 晚上
        if (value == 'night') {
          console.log('晚上')
          this.createMainForm.nightTrainArr.push({
            firstSub: '', 
            secondsSub: '',
            courseNumber: '',
          });
        }
      },
      // 创建周计划弹框的 - 的事件
      handerDelete(value, index) {
        // 早晨
        if (value == 'beforeMorn') {
          this.createMainForm.beforeMornTrainArr.splice(index, 1)
        }
        // 上午
        if (value == 'morning') {
          this.createMainForm.morningTrainArr.splice(index, 1)
        }
        // 下午的
        if (value == 'afternoon') {
          this.createMainForm.afternoonTrainArr.splice(index, 1)
        }
        // 晚上
        if (value == 'night') {
          this.createMainForm.nightTrainArr.splice(index, 1)
        }
      },
      handerCreateWeek() {
        this.weekDialogVisible = true;
        this.$nextTick(() => {
          this.$refs.createMainForm.resetFields();
        })
      }
    },
    created(){
      this.Plain
    }
   }
</script>

<style lang="scss" scoped>
   .week-plan {
     padding: 20px;
   }
   .week-target-title {
     display: flex;
     flex-direction: column;
   }
   .step-box {
     margin-top: 40px;
     display: flex;
     justify-content: center;
   }
   .two-form-box {
     display: flex;
     justify-content: space-between;
   }
   .train-title {
     display: flex;
     justify-content: space-around;
     align-items: center;
     color: #fff;
     background: blue;
     height: 40px;
     letter-spacing: 5px;
   }
   .final-step-title {
     display: flex;
     align-items: center;
     color: #fff;
     background: blue;
     height: 40px;
     padding-left: 30px;
     letter-spacing: 5px;
     margin-bottom: 30px;
   }
   .train-table-box {
     margin: 20px 0;
   }
   .plan-button {
     display: flex;
     justify-content: flex-end;
    //  margin-bottom: 20px;
   }
   .create-main-box {
     border: 1px solid #dedede;
     border-radius: 4px;
     margin-bottom: 28px;
   }
   .create-plan-main {
     padding: 20px;
   }
   .title {
     height: 33px;
     line-height: 33px;
     background: #f5f5f5;
     padding: 0 10px;
     font-weight: bold;
   }
   .main-icon {
     display: inline-block;
     height: 36px;
     line-height: 36px;
     font-size: 18px;
     cursor: pointer;
   }
   .create-header {
     margin-left: 20px;
   }
   .strength-box {
     display: flex;
     align-items: center;
     margin-bottom: 30px;
   }
   .strength-title {
     width: 300px;
     text-align: center;
   }
   .strength-to {
     width: 100px;
     text-align: center;
   }
   .check-radio {
     display: flex;
     justify-content: flex-end;
   }
  //  周计划
  .auunerplan{
    text-align: center;
    line-height: 87px;
    width:100%;
    height:200px;
    background-color:rgba(37, 44, 65, 1);
  }
  .planweek{
    color:#fff;
  }
</style>
